<template>
  <div>
    <van-tag type="success" class="tag" round>全场保障</van-tag>
    <van-tag type="success" class="tag" round>未服务全额退款</van-tag>
    <van-tag type="success" class="tag" round>爽约包赔</van-tag>
    <van-tag type="success" class="tag" round>不满意重服务</van-tag>
    <div class="order-details-container">
      <!-- 动态渲染每个派单 -->
      <div v-for="(value, index) in fan" :key="index" class="order-details">
        <!-- 图片和内容部分 -->
        <div class="order-info-content">
          <!-- 左侧图片 -->
          <div class="order-image">
            <img :src="value.photo" alt="Item Image"/>
          </div>
          <!-- 右侧内容 -->
          <div class="order-text">
            <span class="title">{{ value.name }}</span>
            <van-tag type="success" round>{{value.effect}}</van-tag>

            <span class="hospital" style="color: red;font-size: 20px">{{ value.price}}元</span>
            <span class="hospital">{{ value.minutes}}分钟</span>
            <span class="hospital">已有:{{ value.choose}}人选择</span>
<!--            <span class="patient-info">就诊人: {{ item.rescuersName }} <span class="phone-number">{{-->
<!--                item.rescuersPhone-->
<!--              }}</span></span>-->
          </div>
          <van-stepper v-model="num" />




        </div>

        <!-- 价格和接单按钮部分 -->

      </div>
<!--      <van-icon name="shopping-cart" size="24" @click="goToCart" />-->

      <van-icon name="cart-o" color="#1989fa" />
      <button class="accept-btn" @click="Tijiao()">提交订单</button>
      <van-area
          v-if="areaShow"
          title="标题"
          :area-list="areaList"
          :columns-placeholder="['省份', '城市', '区县']"
      />
    </div>
  </div>
</template>



<script>
import axios from 'axios';
import { areaList } from '@vant/area-data';
import {Dialog} from 'vant';
import {Toast} from 'vant';

export default {
  data(){
    return{
      areaShow:false,
      areaList,
      num: 0,
      tid:null,
      fan:[],
      value:{}
    }
  },
  created() {
    const tid = sessionStorage.getItem('Tid');
    this.tid=tid;
    this.findPage();
  },
  methods: {
    Tijiao(){
      let tids = [];
      for (let item of this.fan) {
          tids.push(item.tid);
      }
      sessionStorage.setItem("tidInfo",tids);
      // this.value.id=this.tid;
      this.$router.push({path:`/yuyue`,query:{tids:tids}})
      console.log(this.value.id+"1111111111111111")

      // this.$router.push('/yuyue')
    },
    goToCart(){

    },
    findPage() {
        axios.post(`http://localhost:10086/technician/findPage?id=${this.tid}`).then(res => {
          this.fan = res.data;
          console.log(this.fan)
          console.log(res.data[0].price)
          let qian=res.data[0].price;
          sessionStorage.setItem("qian",qian);
        })
    }
  }
}


</script>
<style>
.tag{
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 15px;
  color: white;
.accept-btn {
  background-color: red;
margin-right: 100px;
}
}
</style>